<!--
 * @Author: zhangfeng
 * @Date: 2023-12-27 11:21:23
 * @LastEditTime: 2024-01-09 17:29:21
 * @LastEditors: zhangfeng
 * @Description: 
 * @FilePath: \manager\managersystem\src\views\role\RolePage.vue
 * © 2023 张峰，All rights reserved.
-->
<template>
	<el-card class="box-card">
		<template #header>
			<div class="card-header">
				<el-button @click="roleDialogRef.addRoles()" class="button" type="primary"
					>添加角色</el-button
				>
			</div>
		</template>
		<el-table
			v-loading="loading"
			:data="roleTableData"
			row-key="id"
			border
			style="width: 100%"
		>
			<el-table-column type="index" label="序号" width="80" align="center" />
			<el-table-column prop="name" label="角色名称" />
			<el-table-column prop="description" label="描述" />
			<el-table-column label="操作">
				<template #default="scope">
					<el-button
						@click="roleDialogRef.editRoles(scope.row)"
						link
						type="primary"
						size="small"
						>修改</el-button
					>
					<el-button
						@click="premissionRef.handleOpen(scope.row)"
						link
						type="success"
						size="small"
						>权限</el-button
					>
					<el-button
						@click="
							async () => {
								if (successOrError) {
									await successOrError(
										(await deleteRoles(scope.row.id)) as AxiosResponse<ResponseData>
									);
									await getAllRoles();
								}
							}
						"
						link
						type="danger"
						size="small"
						>删除</el-button
					>
				</template>
			</el-table-column>
		</el-table>
	</el-card>
	<RoleDialog ref="roleDialogRef" @getlist="getAllRoles()" />
	<Premission ref="premissionRef" />
</template>

<script setup lang="ts">
import { useRoles } from '../../composables/useRoles';
import RoleDialog from './module/RoleDialog.vue';
import Premission from './module/Premission.vue';
import { globalInjectSymbol } from '../../utils/symbolKey';
const { successOrError } = inject(globalInjectSymbol) || {};
const { loading, getAllRoles, roleTableData, deleteRoles } = useRoles();
const roleDialogRef = ref();
const premissionRef = ref();

getAllRoles();
</script>

<style scoped></style>
